<template>
  <page-lr class="page-pollution-situation">
    <div class="flex-block" :style="{height:domHeight+'px'}" slot="content-left">
      <div class="list-img">
        <el-row :gutter="80">
          <el-col :xs="24" :sm="10">
            <div class="img-block">
            <el-image 
              :style="{width: '100%', height:'auto'}"
              :src="list.traj[searchForm.index]" 
              :z-index="3000"
              :lazy="true"
              :preview-src-list="list.traj">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          </el-col>
          <el-col :xs="24" :sm="14">
            <div class="img-block">
            <el-image 
              :style="{width: '100%', height:'auto'}"
              :src="list.conc[searchForm.index]" 
              :z-index="3000"
              :lazy="true"
              :preview-src-list="list.conc">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          </el-col>
        </el-row>
      </div>
    </div>
        <el-form size="small" :model="searchForm" label-width="90px" slot="content-right">
          <el-form-item label="选择日期：">
            <el-date-picker v-model="searchForm.date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerDate" @change="getList" style="width:100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="类型：">
            <el-button v-for="(item,index) in initData.stations" :key="index" size="small" :type="searchForm.index == index ? 'primary' : 'default'" @click="searchForm.index = index">
              {{ item.name }}
            </el-button>
          </el-form-item>
        </el-form>
  </page-lr>
</template>
<script>
import {city} from '@/config/env';
export default {
  data() {
    return {
      loading: true,
      searchForm:{
        date: '',
        index: 0,
      },
      initData:{
        ftData: [],
        stations: []
      },
      pickerDate:{
        disabledDate:(time) => {
          // let len = initData.fpData.length;
          const current = new Date(this.$moment().add(7,'d')).getTime();
          const start = new Date('2022-01-01').getTime();
          return time.getTime() > current || time.getTime() < start;
        }
      },
      list:{
        traj: [],
        conc: [],
      },
      domHeight: null,
    }
  },
  created() {
    this.domHeight = document.body.clientHeight - 64 - 40 - 48*2 - 20;
    this.searchForm.date = this.$moment().format('YYYY-MM-DD');
    this.getInitData();
  },
  methods: {
    async getInitData(){
      // this.initData.fpDate = await this.$request('get', '/air/sa/fp_dates', {});
      this.initData.stations = await this.$request('get', '/air/stations', {});
      this.getList();
    },
    getList(){
      let str0 = this.$moment(this.searchForm.date).format('YYYY/MM/DD');
      let arr = this.searchForm.date.split('-');
      this.list.traj = this.initData.stations.map(item => {        
        return `/pic/hysplit/traj/${str0}/${item.name_cn}/${arr.join('')}_${item.name_cn}.jpg`
      });
      this.list.conc = this.initData.stations.map(item => {        
        return `/pic/hysplit/conc/${str0}/${item.name_cn}/${arr.join('')}_${item.name_cn}.jpg`
      });
    }
  }
}
</script>